$(function () {
    $("#cldFrame").html('<table id="cldTable" border="0" cellpadding="0" cellspacing="0">' +
        '        <thead>' +
        '        <tr id="thead">' +
        '            <td colspan="7">' +
        '                <div id="top">' +
        '                    <span id="left">&lt;</span>' +
        '                    <span id="title"></span>' +
        '                    <!--对外暴露input，当title日期改变的时候这里的值也会改变-->' +
        '                    <input type="hidden" id="hiddenTitle">' +
        '                    <span id="right">&gt;</span>' +
        '                </div>' +
        '            </td>' +
        '        </tr>' +
        '        <tr id="week">' +
        '            <td class="cldWeek" attr="1">一</td>' +
        '            <td class="cldWeek" attr="2">二</td>' +
        '            <td class="cldWeek" attr="3">三</td>' +
        '            <td class="cldWeek" attr="4">四</td>' +
        '            <td class="cldWeek" attr="5">五</td>' +
        '            <td class="cldWeek" attr="6">六</td>' +
        '            <td class="cldWeek" attr="7">日</td>' +
        '        </tr>' +
        '        </thead>' +
        '        <tbody id="tbody">' +
        '        </tbody>' +
        '    </table>');
});
$(window).load(function () {
    //获取当前年月日星期
    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth() + 1;
    var my_day = my_date.getDate();

    /**
     *  获取这个月的总天数
     *
     * @param year 年
     * @param month 月
     * @returns number
     */
    function getDayNums(year, month) {
        var day = new Date(year, month, 0);
        return day.getDate();
    }

    /**
     * 根据日期获取这一天是星期几
     *
     * @param dayValue 日期格式为“2019-01-01”
     * @returns {number}
     */
    function getWeekByDay(dayValue) {
        var day = new Date(Date.parse(dayValue.replace(/-/g, '/'))); //将日期值格式化
        return (day.getDay() === 0 ? 7 : day.getDay());  //返一个星期中的某一天，其中0为星期日
    }

    /**
     * 标签语句
     * @param id 该日期的id
     * @param type （start：开头空白部门，min：中间可选择部分，end：结束空白部门）
     * @returns {string}
     */
    function trVal(id, type) {
        var str = id < 10 ? '0' + id : id;
        if (type === 'start') {
            return '<td class="upMethod orderMethod">' + str + '</td>';
        } else if (type === 'min') {
            if (id === my_day) {
                return '<td class="currentMethod txStyle" str="' + str + '" id="' + id + '"><i class="marker">' + str + '</i></td>';
            } else {
                return '<td class="currentMethod txStyle" str="' + str + '" id="' + id + '">' + str + '</td>';
            }
        } else {
            return '<td class="downMethod orderMethod">' + str + '</td>';
        }
    }


    /**
     * 根据年、月，生成表格
     *
     * @param year
     * @param month
     */
    function refreshDate(year, month) {
        $("#tbody").html('');
        year = parseInt(year);
        month = parseInt(month);

        var firstWeek = getWeekByDay(year + "-" + month + "-01");//计算出这个月的第一天是星期几
        var dayNum = getDayNums(year, month);//计算出这个月的天数
        var upDay = 0;//上个月的总天数
        if (month === 1) {//说明这个月是1月，上个月就是去年的12月份
            upDay = getDayNums(year - 1, 12);
        } else {//从之前月份基础上 -1
            upDay = getDayNums(year, month - 1);
        }

        /**
         * 开始拼凑第一行，对于第一行而言只需要知道这个月的第一天是多少，然后前面的空白部分都用上个月的天数从头插入即可
         * 例如：
         *          数据：这个月第一天是星期6，上个月的总天数是31天
         *          第一行的排列顺序为：27,28,29,30,31,1,2
         * 注：前半段为灰色，也就是不能多选但是可以点击跳转至下个月
         */
        var tbody = $("#tbody");//获取tbody对象
        var strDate = '<tr>';
        for (var i = firstWeek - 1; i > 0; i--) {
            strDate += trVal(upDay - i + 1, 'start');
        }

        var curDay = (7 - firstWeek) + 1;//第二行的第一天是多少号；
        for (var i = 0; i < (7 - firstWeek) + 1; i++) {
            strDate += trVal(i + 1, 'min');
        }
        strDate += '</tr>';
        tbody.append(strDate);


        /*
        * 开始拼凑第二行以后的数据，第二行开头数据为第一行最后一天 + 1，且一行为7天
        * 此数据为中间数据，可选择
        * */
        strDate = '<tr>';
        var num = 0;//记录循环次数
        for (var i = curDay; i < dayNum; i++) {
            if (num === 7) {
                num = 0;
                strDate += '</tr><tr>';
            }
            strDate += trVal(i + 1, 'min');
            num++;
        }

        /**
         * 开始拼凑结尾部分，此结尾部分需要获取本月的最后一天是星期几，然后往后添加
         */
        var curDayNum = getWeekByDay(year + "-" + month + "-" + dayNum);//这个月最后一天是星期几
        for (var i = 0; i < 7 - curDayNum; i++) {
            strDate += trVal(i + 1, '');
        }
        strDate += '</tr>';
        tbody.append(strDate);

        /*可以随时删除*/
        $("#6").html('<p>06</p><span>调休上班</span>');


        $("#title").html(year + "-" + (month < 10 ? "0" + month : month));//标题回显数据
        $("#hiddenTitle").val(year + "-" + month);//将值设置到隐藏域中去
    }

    refreshDate(my_year, my_month); //执行该函数，生成表格

    //执行一个laydate实例
    laydate.render({
        elem: '#title'
        , btns: ['now', 'confirm']
        , type: 'month'
        , theme: 'grid'
        , done: function (value, date) {
            refreshDate(date.year, date.month);//执行该函数，生成表格
        }
    });

    //点击左箭头跳转到上个月
    $("#left").click(function () {
        var splitVul = $("#hiddenTitle").val().split("-");
        var year = parseInt(splitVul[0]);
        var month = parseInt(splitVul[1]);
        if (month === 1) {
            refreshDate(year - 1, 12); //执行该函数，生成表格
        } else {
            refreshDate(year, month - 1); //执行该函数，生成表格
        }
    });

    //点击右箭头跳转到下一个月
    $("#right").click(function () {
        var splitVul = $("#hiddenTitle").val().split("-");
        var year = parseInt(splitVul[0]);
        var month = parseInt(splitVul[1]);
        if (month === 12) {
            refreshDate(year + 1, 1); //执行该函数，生成表格
        } else {
            refreshDate(year, month + 1); //执行该函数，生成表格
        }
    });

    //点击上面空白部分跳转至上一个月
    $(document).on('click', '.upMethod', function () {
        var splitVul = $("#hiddenTitle").val().split("-");
        var year = parseInt(splitVul[0]);
        var month = parseInt(splitVul[1]);
        if (month === 1) {
            refreshDate(year - 1, 12); //执行该函数，生成表格
        } else {
            refreshDate(year, month - 1); //执行该函数，生成表格
        }
    });

    //单击下面空白部分跳转至下个月
    $(document).on('click', '.downMethod', function () {
        var splitVul = $("#hiddenTitle").val().split("-");
        var year = parseInt(splitVul[0]);
        var month = parseInt(splitVul[1]);
        if (month === 12) {
            refreshDate(year + 1, 1); //执行该函数，生成表格
        } else {
            refreshDate(year, month + 1); //执行该函数，生成表格
        }
    });

    /**
     * 多选事件！！！
     */

    document.onselectstart = function () {
        event.returnValue = false;
    }

    var dayArray = [];//已选中的集合
    var down = '';//记录鼠标按下的位置

    var mousedown = 0;
    var mouseup = 0;
    $(document).on('mousedown', '.currentMethod', function () {
        mousedown = parseInt($(this).attr("id"));
    });

    //鼠标左键，多选
    $(document).on('mouseup', '.currentMethod', function () {
        mouseup = parseInt($(this).attr("id"));
        if (mouseup - mousedown !== 0) {
            removeOrderNum($(this));
            if (mousedown < mouseup) {//向下选择
                for (var i = mousedown; i <= mouseup; i++) {
                    $("#" + i).addClass("selected");
                    dayArray.push(i);
                }
            } else if (mousedown > mouseup) {//往上选择
                for (var i = mouseup; i <= mousedown; i++) {
                    $("#" + i).addClass("selected");
                    dayArray.push(i);
                }
            }
        }
    });

    //单选
    $(document).on('click', "#tbody tr td", function (e) {
        if ($(this).hasClass("currentMethod")) {
            e = e || event;
            if (e.shiftKey) {
                var shiftDown = $(this).attr('id');
                if (down == '' && down < 1) {//判断是否有第一次选中，如果没有将按住shfit时的值给他，然后跳过
                    down = $(this).attr('id');
                    dayArray.push(down);
                    $("#" + down).addClass("selected");
                }
                var downInt = parseInt(down);
                var shiftDownInt = parseInt(shiftDown);
                removeOrderNum($(this));
                if (downInt < shiftDownInt) {//往下选择
                    for (var i = downInt; i <= shiftDownInt; i++) {
                        $("#" + i).addClass("selected");
                        dayArray.push(i);
                    }
                } else if (downInt > shiftDownInt) {//往上选择
                    for (var i = shiftDownInt; i <= downInt; i++) {
                        $("#" + i).addClass("selected");
                        dayArray.push(i);
                    }
                } else {//重复按
                    $("#" + shiftDownInt).addClass("selected");
                    dayArray.push(shiftDownInt);
                }
            } else if (e.ctrlKey) {
                if ($(this).hasClass("selected")) {
                    $(this).removeClass("selected");
                    removeDayArray($(this));
                } else {
                    dayArray.push($(this).attr("id"));
                    $(this).addClass("selected");
                }
            } else {
                down = $(this).attr('id');
                /!* 单选操作 *!/
                if ($(this).hasClass("selected")) {
                    $(this).removeClass("selected");
                    removeDayArray($(this));
                } else {
                    dayArray.push($(this).attr("id"));
                    $(this).addClass("selected");
                }
                // 如果是单选则删除其他所有的已选中
                removeOrderNum($(this));
            }
        }
    });

    // 多行操作
    $(document).on('click', ".cldWeek", function () {
        var attr = $(this).attr("attr");
        var tmpNum = 0;//判断这一列是否有选中
        $('#tbody tr td:nth-child(' + attr + ')').each(function () {
            if ($(this).hasClass("currentMethod")) {
                if (!$(this).hasClass("selected")) {
                    tmpNum = 1;
                }
            }
        });
        $('#tbody tr td:nth-child(' + attr + ')').each(function () {
            if ($(this).hasClass("currentMethod")) {
                if (tmpNum == 1) {//有不亮的，需要让所有的都亮起来
                    dayArray.push($(this).attr('id'));
                    $(this).addClass("selected");
                } else { //全都不亮
                    removeDayArray($(this));
                    $(this).removeClass("selected");
                }
            }
        })
    });

    //删除数组的方法
    function removeDayArray(obj) {
        for (var i = 0; i < dayArray.length; i++) {
            if (dayArray[i] == obj.attr("id")) {
                dayArray.splice(i, 1);
            }
        }
    }

    //删除其他已选中
    function removeOrderNum(obj) {
        for (var i = 0; i < dayArray.length; i++) {
            if (dayArray[i] != parseInt(obj.attr("id"))) {
                $("#" + dayArray[i]).removeClass("selected");
                dayArray.splice(i--, 1);
            }
        }
    }

});